<!--eslint eqeqeq:0-->
<template>
  <el-select ref="selectData" :value="value" :clearable="true" filterable :disabled="isDisabled" :placeholder="placeholder" @change="selectChange" @input="change($event)">
    <el-option v-for="item in selectList" :key="item.id + ''" :label="item.name" :value="item.id" />
  </el-select>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'DataStreamSelect',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectList: [],
      placeholder: this.placetext,
      operatorProps: this.operator,
      isDisabled: !!this.disabled,
      isClearable: this.clearable === undefined ? true : !!this.clearable
    }
  },
  watch: {
    disabled: function(val) {
      this.isDisabled = !!val;
    },
    clearable: function(val) {
      this.isClearable = !!val;
    }
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    getData: function() {
      var _this = this;
      request({
        url: `/contentData/contentDataStream/getList`,
        method: 'POST',
        data: {
          status: 0
        }
      }).then(res => {
        _this.selectList = res.data;
      })
    },
    selectChange: function(value) {
      this.$emit('select-change', value);
    },
    change: function(value) {
      let name = '';
      this.selectList.forEach(item => {
        if (item.id === value) {
          name = item.name;
        }
      });
      this.$emit('input', value);
      this.$emit('change', name)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
